<template>
  <div>
    <div class="page-header">
      <!-- <div class="logo">
        <img
          style="width:120px;"
          src="https://vuejs.org/images/logo.png"
          alt=""
        />
      </div> -->
      <h1 class="project-name">可视化平台</h1>
      <h2 class="project-tagline">壹达创优, 在线运行 & 编辑 Vue 单文件</h2>
      <!-- <div>
        <a
          href="https://github.com/dream2023/vue-run-sfc"
          target="_blank"
          class="btn"
          >View on GitHub</a
        >
        <a
          href="https://www.npmjs.com/package/vue-run-sfc"
          target="_blank"
          class="btn"
          >View on NPM</a
        >
      </div> -->
    </div>
    <section class="main-content">
      <h2>DEMO</h2>
      <vue-run-sfc
        :js-labs="jsLabs"
        :css-labs="cssLabs"
        title="自定义组件DEMO"
        :open="true"
        :code="code"
      />
      <h2>DEMO</h2>
      <codemirror style="border-top: 1px solid #eee" />
    </section>
  </div>
</template>

<script>
import { codemirror, codemirrorOption } from "../src/codemirror";
import exampleCode from "./example";
import axios from "axios";

export default {
  name: "App",
  components: {
    codemirror
  },
  data() {
    return {
      axios: axios,
      exampleCode: exampleCode,
      codemirrorOption: codemirrorOption,
      jsLabs: ["https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"],
      cssLabs: [
        "https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css"
      ],
      code: `<template>
  <div>
    <h1>{{title}}</h1>
    <div>
    
    <p/>
    <el-button type="primary" @click="requestData">登录</el-button>
    
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: "登录页面"
      };
    },
    created(){
      
        },
    methods: {
      requestData() {
        
         $.ajax({
                type: "get",
                url: "http://192.168.1.212:8987/element/project/debugEvent/349/97820",
                dataType: "json",
                contentType: 'application/json;charset=UTF-8',
                success: function (d) {
                    alert(d.data);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('出错了，请与管理员联系！【错误码：' + textStatus + '】');
                }
            });
      
    },
      handleClick () {
        alert('触发事件')
      }
    }
  };
<\/script>

<style lang="scss">
  body {
    #box {
      color: #409EFF;
    }
  }
</style>`
    };
  }
};
</script>

<style>
@import url("./app.css");
pre {
  line-height: 1.4;
  padding: 1.25rem 1.5rem;
  margin: 0.85rem 0;
  background-color: #282c34;
  border-radius: 6px;
  overflow: auto;
  color: rgba(255, 255, 255, 0.9);
}
</style>
